{include file="../app/view/common/header.html" page="score" subtitle="我的成绩"}

<script src="/static/score/index.js"></script>
<link href="/static/user/user.css" rel="stylesheet">
<style>
    *{
        padding : 0px;
        margin: 0px;
    }
    .back
    {
        position: absolute;
        width:400px;
        height:300px;
        z-index: -1;
    }
    .score
    {
        font-size: 100px;
        text-align: center;
        line-height: 300px;
    }
    .all
    {
        font-size: 50px;
        font-weight: 500;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
<div>刮开下面看成绩！</div>
<div>电脑端打开请先把侧边栏收起来（懒得修bug乐）</div>
    <!-- 画布的大小和图片的大小是一样的哟-->
    <div class="back score" id="score">1000</div>
    <canvas width="400" height="300" id="canvas"></canvas>
    <div id="allScore" class="all"></div>
    <script>
         var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    var w = canvas.width;
    var h = canvas.height;
    var area = w * h;
    //画蒙布
    ctx.beginPath();
    ctx.fillStyle = 'grey';
    ctx.fillRect(0, 0, 400, 300);

    //核心代码 显示原来的不在后来区域的部分
    function moveFunc(x, y) {
      ctx.globalCompositeOperation = "destination-out";
      ctx.beginPath();
      ctx.arc(x, y, 30, 0, Math.PI * 2);
      ctx.fill();
      ctx.closePath();
      // 刮开70% 自动刮开全部
      var data = ctx.getImageData(0, 0, w, h).data,
        scrapeNum = 0;
      for (var i = 3; i < data.length; i += 4) {
        if (data[i] === 0) {
          scrapeNum++;
        }
      }
      if (scrapeNum > area * 0.5) {
        ctx.clearRect(0, 0, w, h);
        onGuakai()
        canvas.ontouchmove = function () {};
        canvas.onmousemove = function () {};
      }
    }

    //鼠标按下开刮
    canvas.onmousedown = function () {
      canvas.onmousemove = function (e) {
        //获取鼠标坐标
        var x = event.pageX;
        var y = event.pageY-100;
        e.preventDefault()
        moveFunc(x, y)
      };
    };
    //鼠标抬起不刮开
    canvas.onmouseup = function () {
      canvas.onmousemove = function () {};
    };
    // 兼容移动端
    canvas.ontouchstart = function () {
      canvas.ontouchmove = function (e) {
        var x = event.touches[0].pageX;
        var y = event.touches[0].pageY-100;
        e.preventDefault()
        moveFunc(x, y)
      };
    };
    canvas.ontouchend = function () {
      canvas.ontouchmove = function () {};
    };
    </script>
</body>
</html>